<template>
    <a-menu class="menu-wrapper" mode="inline">
        <a-menu-item v-for="item in data" :key="item?.id" class="menu-item" v-model:selectedKeys="selectedKeys">
            <a-space :size="24">
                <Badge :count="13">
                    <Avatar shape="square" :size="48" :src="item?.avatar" />
                </Badge>
            </a-space>
            <div class="info">
                <div class="left">
                    <div class="user">
                        <div class="name">微信昵称</div>
                        <div class="from">@微信</div>
                    </div>
                    <div class="txt">聊天内容</div>
                </div>
                <div class="time">
                    <div>21:55</div>
                    <a-dropdown placement="bottom">
                        <EllipsisOutlined :style="{fontSize: '16px'}" class="icon" />
                        <template #overlay>
                            <a-menu>
                                <a-menu-item @click="handleTop(item)">置顶</a-menu-item>
                                <a-menu-item @click="handleUnread(item)">标为未读</a-menu-item>
                                <a-menu-item @click="handleDisturb(item)">消息免打扰</a-menu-item>
                                <a-menu-item @click="handleDelete(item)">结束对话</a-menu-item>
                                <a-menu-item @click="handleBlock(item)">屏蔽</a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </div>
        </a-menu-item>
    </a-menu>
</template>

<script setup lang="ts">
import {ref, PropType} from "vue";
import {Badge, Avatar} from "ant-design-vue";
import {EllipsisOutlined} from "@ant-design/icons-vue";

// 选中当前项
const selectedKeys = ref([]);

const {data} = defineProps({
    data: {
        type: Array as PropType<any[]>,
        default: [],
    },
});

// 置顶
const handleTop = params => {};
// 标为未读
const handleUnread = params => {};
// 消息免打扰
const handleDisturb = params => {};
// 结束对话
const handleDelete = params => {};
// 屏蔽
const handleBlock = params => {};
</script>

<style scoped lang="less">
.menu-wrapper {
    overflow-y: scroll;
    flex: 1;
    border-bottom: 1px solid #ccc;

    :deep(.ant-menu-item) {
        height: max-content !important;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        padding: 12px !important;
        border-radius: 4px;
        cursor: pointer;
        margin: 0 !important;

        .ant-menu-title-content {
            display: flex;
            align-items: center;
            overflow: visible;
        }
    }
    :deep(.ant-menu-item-selected) {
        background-color: #e9e9e9 !important ;
    }

    .menu-item {
        display: flex;
        .img {
            width: 40px;
            height: 40px;
        }
        .info {
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin-left: 18px;
            div {
                line-height: 28px;
            }
            .left {
                display: flex;
                flex-direction: column;
                .user {
                    display: flex;
                    align-items: center;

                    .name {
                        color: #000;
                    }
                    .from {
                        margin-left: 8px;
                        font-size: 12px;
                        color: #19af19;
                    }
                }
                .txt {
                    font-size: 12px;
                    color: #888999;
                    line-height: 16px;
                    margin-top: 2px;
                }
            }
            .time {
                font-size: 12px;
                height: 22px;
                color: #888999;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .icon {
                    margin-top: 4px;
                    display: none;
                }
            }
        }
        :hover {
            .icon {
                display: block !important;
            }
        }
    }
}
</style>
